@import "@/theme";

.home-game-container {
  padding: 1.2rem;
  box-sizing: border-box;
  position: relative;
  height: calc(100vh - $game-main-header-height);
  background-color: #E6E6F6;
  .empty {
    margin: 100px auto;
  }
  .skeleton-item {
    width: 4rem;
    height: 1.7rem;
    margin-right: 0.8rem;
    animation: sk-item .5s infinite forwards;
    border: 0;
    box-shadow: none;
  }
  @keyframes sk-item {
    from {
      background: linear-gradient(to right, #dfdfea, #ebebef);
      opacity: .5;
    }
    to {
      background: linear-gradient(to right, #e8e8f3, #ebebef);
      opacity: 1;
    }
  }
}
.home-game-tags {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: center;
}
.home-game-tag {
  flex-shrink: 0;
  min-width: 4rem;
  text-align: center;
  box-sizing: border-box;
  padding: 0.4rem 2.2rem;
  background-color: #fff;
  color: #333;
  border-radius: 0.3rem;
  font-size: 0.8rem;
  transition: all .2s;
  box-shadow: rgba(166, 166, 166, 0.5) 0 0  0 1px inset;
  &:hover {
    background: linear-gradient(180deg, #836dec, #9779e7);
    box-shadow: 0px 12px 18px 0px rgba(143,99,255,0.4);
    cursor: pointer;
    color: #f1f1f1;
  }
}
.home-game-tag-active {
  background: linear-gradient(270deg, #8670ee, #673ada) !important;
  color: #fff;
  box-shadow: 0px 12px 18px 0px rgba(143,99,255,0.6);
}
.home-game-tag + .home-game-tag {
  margin-left: 1rem;
}
.home-game-item-wrapper {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-top: 2rem;
  flex-flow: row wrap;
  .home-game-item {
    width: 14rem;
    height: calc(12rem / 0.90);
    position: relative;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    border-radius: 0.4rem;
    overflow: hidden;
    margin-left: 1rem;
    margin-right: 1rem;
    margin-bottom: 1.5rem;
    &:hover {
      transform: scale(1.03);
    }
    .img {
      width: 14rem;
      height: calc(14rem / 16 * 9);
    }
    .title {
      color: #fff;
      padding: 2px 1rem;
      box-sizing: border-box;
      margin-top: .8rem;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
    .num {
      color: #fff;
      padding: 2px 1rem;
      box-sizing: border-box;
      font-size: smaller;
    }
  }

}